<template>
	<div>
		<el-button v-if="!tableData || !tableData.length" type="default" size="mini" plain icon="el-icon-plus" class="width-100-percent" @click="onAddBtn"></el-button>
		<jk-table v-else ref="jkTable" :data="tableData" border :height="200" style="width: 100%">
			<vxe-table-column type="seq" title="序号" width="70" align="center" />
			<vxe-table-column field="val" title="粗纱成分" align="left" :min-width="200">
				<template slot-scope="scope">
					<span v-if="pageType === 'detail'">{{ scope.row.productName }}</span>
					<remote-search-product-input
						v-else
						placeholder="粗纱成分"
						size="small"
						default-stock-type="RAW_MATERIAL"
						only-key="productId"
						query-name="productName"
						:form-data="scope.row"
						@on-select="onSelectProductChange($event, scope.rowIndex)"
					></remote-search-product-input>
				</template>
			</vxe-table-column>
			<vxe-table-column field="price" title="单价" align="right" :min-width="120"></vxe-table-column>
			<vxe-table-column field="proportion" title="比例" align="right" :min-width="120">
				<template slot-scope="scope">
					<span v-if="pageType === 'detail'">{{ scope.row.proportion }}</span>
					<jk-number-input v-else v-model="scope.row.proportion" size="small" @change="returnData"></jk-number-input>
				</template>
			</vxe-table-column>
			<vxe-table-column field="loss" title="损耗" align="right" :min-width="120">
				<template slot-scope="scope">
					<span v-if="pageType === 'detail'">{{ scope.row.loss }}</span>
					<jk-number-input v-else v-model="scope.row.loss" size="small" @change="returnData"></jk-number-input>
				</template>
			</vxe-table-column>
			<vxe-table-column field="rawMaterialPrice" title="原料金额" :min-width="100" align="right">
				<template slot-scope="scope">
					<span v-if="pageType === 'detail'">{{ scope.row.rawMaterialPrice }}</span>
					<jk-number-input v-else v-model="scope.row.rawMaterialPrice" size="small" @change="returnData"></jk-number-input>
				</template>
			</vxe-table-column>
			<vxe-table-column :visible="pageType !== 'detail'" field="val" title="操作" align="center" :width="120">
				<template slot-scope="scope">
					<div class="flex-center">
						<el-button type="text" icon="el-icon-circle-plus" class="margin-left-10" @click="onAddBtn"></el-button>
						<el-button type="text" icon="el-icon-remove" class="margin-left-10" @click="onDeleteBtn(scope.rowIndex)"></el-button>
					</div>
				</template>
			</vxe-table-column>
		</jk-table>
	</div>
</template>
<script>
    import remoteSearchProductInput from './remote-search-product-input';

    export default {
        mixins: [],
        props: {
            optionList: {
                type: Array,
                default() {
                    return [];
                }
            },
            layoutConfig: {
                type: Object,
                default() {
                    return {};
                }
            },
            pageType: {
                type: String,
                default: ''
            },
            showTemplate: {
                type: [Boolean, String],
                default: 'false'
            }
        },
        components: {
            remoteSearchProductInput
        },
        data() {
            return {
                tableData: []
            };
        },
        methods: {
            onDeleteBtn(index) {
                this.tableData.splice(index, 1);
                this.returnData();
            },
            onSelectProductChange(e, index) {
                if (Object.keys(e).length) {
                    this.$set(this.tableData[index], 'productId', e.productId);
                    this.$set(this.tableData[index], 'productCode', e.productCode);
                    this.$set(this.tableData[index], 'productName', e.productName);
                    this.$set(this.tableData[index], 'productModels', e.productModels);
                    this.$set(this.tableData[index], 'price', e.price);
                    this.$set(this.tableData[index], 'loss', e.loss);
                }
                this.returnData();
            },
            returnData() {
                this.$emit('return-data', JSON.parse(JSON.stringify(this.tableData)));
            },
            onAddBtn() {
                this.tableData.push({
                    'id': null,
                    'productId': '',
                    'productCode': '',
                    'productName': '',
                    'productModels': '',
                    'price': null
                });
                this.returnData();
            }
        },
        watch: {
            optionList: {
                handler(newVal) {
                    this.tableData = JSON.parse(JSON.stringify(newVal));
                },
                deep: true
            }
        }
    };
</script>
<style scoped lang="scss">
    @import "../option-box";
</style>
